<style>
    /**选择界面**/
    #choose{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        z-index: 15;
        display: none;
    }
    #choose>div{
        width:75%;
        margin: auto;
        margin-top: 30%;
        background-color: #fff;
        border-radius: 5px;
        padding: 10px 0;
        position: relative;
    }
    #choose .iconal-roundclosefill{
        position: absolute;
        top: -27px;
        right: -23px;
        color: #ff5c67;
        opacity: 0.93;
        font-size: 24px;
        padding: 10px;
    }
    #choose .weui-btn{
        line-height: 2;
        width: 80%;
        margin: 10px auto;
    }
    /**选择门店**/
    #chooseMendian,#chooseJS,#chooseTime{
        display: none;
        position: fixed;
        z-index: 20;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: #fff;
    }
    #chooseMendian>ul,#chooseJS>ul{
        max-height: 85%;
        overflow-y: auto;
    }
    #chooseMendian li{
        padding: 5px;
        margin-top:15px;
        border-bottom:1px solid #ddd;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
    }
    #chooseMendian p.kuan1{
        flex:1;
        -webkit-flex: 1;
        /* for uc */
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
    }
    #chooseMendian p.kuan2{
        flex:2;
        -webkit-flex: 2;
        /* for uc */
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        -ms-flex: 2;
    }
    .TJ{
        position: absolute;
        bottom: 30px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    button.weui-btn, input.weui-btn.storeTJ,input.weui-btn.timeTJ{
        color: #fff;
        background-color: #ff5c67;
        opacity: 0.93;
        width: 45%;
        line-height: 2.5;
        font-size: 16px;

    }
    .weui-icon-success{
        color: #ccc;
    }
    .weui-icon-success.active{
        color: #ff5c67;
        opacity: 0.93;
    }
    /*时间选择*/
    #chooseTime p{
        margin: 10px 5px;
        border: 1px solid #ff5c67;
        padding: 9px;
        border-radius: 5px;
        color: #ff5c67;
        opacity: 0.93;
        width: 40%;
        float:left;
        text-align: center;
    }
    #chooseTime p.active{
        color: #fff;
        background-color: #ff5c67;
        opacity: 0.93;
    }
    .weui-navbar+.weui-tab__bd{
        margin-top: 2em;
    }
    /*技师列表*/
    #chooseJS{
        /*padding:5px;*/
        background: #f3f3f3;
        overflow-y: auto;
    }
    #chooseJS li{
        margin: 5px 0;
        background: #fff;
        /*border-radius: 10px;*/
        display: flex;
        display: -webkit-flex;
        font-size: 14px;
        align-items: center;
        -webkit-align-items: center;
        height: 100px;
        overflow: hidden;
        padding:0 5px;
    }
    #chooseJS li>div{
        display: flex;
        display: -webkit-flex;
        flex:1;
        -webkit-flex: 1;
        /* for uc */
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
    }
    #chooseJS li img{
        width: 60px;
        height: 60px;
        border: 3px solid #ddd;
        border-radius: 50%;
        margin: 5px 0;
        display: block;
    }
    .lists_img{
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        flex-direction: column;
        -webkit-flex-direction: column;
        margin-right: 20px;
    }
    .lists_detail{
        width: 100%;
    }
    .detail_address{
        align-items: center;
        -webkit-align-items: center;
    }
    .lists_detail>p{
        margin: 5px 0;
        display: flex;
        display: -webkit-flex;
    }
    .lists_detail>p:last-child{
        height: 35px;
        overflow: hidden;
    }
    .lists_detail>p>span:first-child{
        flex:1;
        -webkit-flex: 1;
        /* for uc */
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
    }
    .detail_name b{
        margin-right: 5px;
    }
    .lists_img>div{
        /*display: flex;*/
        /*display: -webkit-flex;*/
        /*justify-content: center;*/
        /*-webkit-justify-content: center;*/
        text-align: center;
        width: 66px;
    }
    .iconal-favorfill{
        color: #ff5c67;
        opacity: 0.93;
        font-size: 12px;
    }
    .detail_name i,.detail_address i{
        margin-right: 3px;
        font-size: 14px;
    }
    /*选择按钮*/
    .weui-icon-success{
        color: #aaa;
    }
</style>
<div id="choose">
    <div>
        <div class="MDorSM">
            <!--<a id="show-actions-stores" class="weui-cell weui-cell_access" href="javascript:;">-->
            <!--<div class="weui-cell__bd weui-cell_primary">-->
            <!--<p>请选择门店</p>-->
            <!--</div>-->
            <!--<span class="weui-cell__ft"></span>-->
            <!--</a>-->
            <!--<a id="show-actions-address" class="weui-cell weui-cell_access" href="javascript:;">-->
            <!--<div class="weui-cell__bd weui-cell_primary">-->
            <!--<p>请选择地址</p>-->
            <!--</div>-->
            <!--<span class="weui-cell__ft"></span>-->
            <!--</a>-->
        </div>
        <a onclick="timeCH(this)" id="show-actions-times" class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd weui-cell_primary">
                <p>请选择服务时间</p>
            </div>
            <span class="weui-cell__ft"></span>
        </a>
        <i class="iconal-roundclosefill"></i>
        <a onclick="addCart(this)" href="javascript:;" class="weui-btn weui-btn_primary">加入购物车</a>
        <a onclick="addCart(this,'order')" href="javascript:;" class="weui-btn weui-btn_primary">立即结算</a>
    </div>
</div>
<div id="chooseMendian">
    <ul>
        <!--<li>-->
        <!--<i class="weui-icon-success" onclick="chooseI(this)"></i>-->
        <!--<p class="kuan1">温州店</p>-->
        <!--<p class="kuan2">温州店温州店温州店温州店温州店温州店温州店</p>-->
        <!--</li>-->
    </ul>
    <div class="TJ">
        <button class="weui-btn weui-btn_mini closeTJ">取消</button>
        <button class="weui-btn weui-btn_mini storeTJ">确认</button>
    </div>
</div>
<div id="chooseTime" data-day="" data-time="">
    <!-- 容器 -->
    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tab14"></a>
            <a class="weui-navbar__item" href="#tab15"></a>
            <a class="weui-navbar__item" href="#tab16"></a>
            <a class="weui-navbar__item" href="#tab17"></a>
            <a class="weui-navbar__item" href="#tab18"></a>
            <a class="weui-navbar__item" href="#tab19"></a>
            <a class="weui-navbar__item" href="#tab110"></a>
        </div>
        <div class="weui-tab__bd">
            <div id="tab14" class="weui-tab__bd-item weui-tab__bd-item--active">
                <!--<p>12:00-14:00</p>-->
            </div>
            <div id="tab15" class="weui-tab__bd-item">
            </div>
            <div id="tab16" class="weui-tab__bd-item">
            </div>
            <div id="tab17" class="weui-tab__bd-item">
            </div>
            <div id="tab18" class="weui-tab__bd-item">
            </div>
            <div id="tab19" class="weui-tab__bd-item">
            </div>
            <div id="tab110" class="weui-tab__bd-item">
            </div>
        </div>
    </div>
    <div class="TJ">
        <button class="weui-btn weui-btn_mini closeTJ">取消</button>
        <button class="weui-btn weui-btn_mini timeTJ">确认</button>
    </div>
</div>
<div id="chooseJS">
    <ul>
        <!--<li>-->
        <!--<i class="weui-icon-success" data-id="" data-name=""></i>-->
        <!--<div>-->
        <!--<div class="lists_img">-->
        <!--<img src="https://dimg.365vmei.cn/uploads/avatar/56a642484c6cc.jpg" alt=""/>-->
        <!--<div><i class="iconal-favorfill"></i></div>-->
        <!--</div>-->
        <!--<div class="lists_detail">-->
        <!--<p class="detail_name">-->
        <!--<span><b>姓名</b><span>女</span></span>-->
        <!--<span><i class="iconal-location"></i><span>1000,00</span>公里</span>-->
        <!--</p>-->
        <!--<p class="detail_address">-->
        <!--<span><i class="iconal-wodedingdan"></i><span>200</span>单</span>-->
        <!--<span>位置: <span>XXX</span></span>-->
        <!--</p>-->
        <!--<p class="detail_details">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--</li>-->
    </ul>
    <div class="TJ">
        <button class="weui-btn weui-btn_mini closeTJ">取消</button>
        <button class="weui-btn weui-btn_mini storeTJ">确认</button>
    </div>
</div>
<script>
    //取消按钮操作
    $('.closeTJ').click(function(){
        $(this).parent().parent().slideUp();
    });
    $('.iconal-roundclosefill').click(function(){
        $(this).parent().parent().fadeOut();
    });

    //获取门店列表
    function storesCH(e){
        $.get(
                commonURL+'op=store',
                {
                    id:$('#choose').attr('data-id')
                },
                function(res){
                    if(res=='null'){
                        $.toast('暂无门店地址','cancel');
                        return false;
                    }else {
                        var data = JSON.parse(res);
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += "<li data-id=" + data[i].id + "><i onclick='chooseI(this)' class='weui-icon-success'></i><p class='kuan1'>" + data[i].storename + "</p><p class='kuan2'>" + data[i].address + "</p></li>"
                        }
                        $('#chooseMendian').slideDown();
                        $('#chooseMendian>ul').html(html).attr('data-class','.stores'+$(e).attr('data-id'));
                    }
                }
        );
    }
    //选择门店
    function chooseI(a){
        $('#chooseMendian li i').removeClass('active');
        $(a).addClass('active');
    }
    //提交--门店
    $('#chooseMendian .storeTJ').click(function(e){
        $(e).addClass('active');
        $('#show-actions-times p').html('请选择服务时间');
        var store=$('#chooseMendian li i');
        for(var i=0;i<store.length;i++){
            if($(store[i]).hasClass('active')){
                var p=$(store[i]).next('p');
                $('.MDorSM>a').attr('data-storesid',$(store[i]).parent().attr('data-id')).find('p').html('门店地址: '+ p.html()).attr('data-id',$(store[i]).parent().attr('data-id'));
                $('#chooseMendian').slideUp();
                return false;
            }
        }
        $.toast('请选择门店','text');
    });


    //获取时间列表
    function timeCH(e){
        if($('.MDorSM p').html()=='请填写地址信息'){
            $.toast('请先填写地址信息','text');
            setTimeout(function(){
                $('.MDorSM>a').click();
            },1500);
            return false;
        }
        if($('.MDorSM p').html()=='请选择门店地址'){
            $.toast('请先选择门店地址','text');
            setTimeout(function(){
                $('.MDorSM>a').click();
            },1500);
            return false;
        }
        if(getQueryString('ac')&&(getQueryString('ac')=='list')){
            var dataTime=JSON.parse($('.yuebiao[data-id="'+$('#choose').attr('data-id')+'"]').attr('data-params'));
        }else{
            var dataTime=JSON.parse($('.iconal-yuebiao[data-id="'+$('#choose').attr('data-id')+'"]').attr('data-params'));
        }

        var show_day=['周一','周二','周三','周四','周五','周六','周日'];
        var day4=new Date();
        var m = day4.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = day4.getDate();
        d = d < 10 ? ('0' + d) : d;
        var day=day4.getDay();

        var day5=ktkGetNextDate(1);
        var day6=ktkGetNextDate(2);
        var day7=ktkGetNextDate(3);
        var day8=ktkGetNextDate(4);
        var day9=ktkGetNextDate(5);
        var day10=ktkGetNextDate(6);

        //星期
        var showD4=(day-1)>6?(day-8):(day-1);
        var showD5=(day)>6?(day-7):(day);
        var showD6=(day+1)>6?(day-6):(day+1);
        var showD7=(day+2)>6?(day-5):(day+2);
        var showD8=(day+3)>6?(day-4):(day+3);
        var showD9=(day+4)>6?(day-3):(day+4);
        var showD10=(day+5)>6?(day-2):(day+5);

        dateTime(day4.getFullYear()+'-'+m+'-'+d,dataTime,'#tab14');
        dateTime(day4.getFullYear()+'-'+day5,dataTime,'#tab15');
        dateTime(day4.getFullYear()+'-'+day6,dataTime,'#tab16');
        dateTime(day4.getFullYear()+'-'+day7,dataTime,'#tab17');
        dateTime(day4.getFullYear()+'-'+day8,dataTime,'#tab18');
        dateTime(day4.getFullYear()+'-'+day9,dataTime,'#tab19');
        dateTime(day4.getFullYear()+'-'+day10,dataTime,'#tab110');

        $('a[href=#tab14]').html('<div>'+show_day[showD4]+'</div><div>'+m+'-'+d+'</div>');
        $('a[href=#tab15]').html('<div>'+show_day[showD5]+'</div><div>'+day5+'</div>');
        $('a[href=#tab16]').html('<div>'+show_day[showD6]+'</div><div>'+day6+'</div>');
        $('a[href=#tab17]').html('<div>'+show_day[showD7]+'</div><div>'+day7+'</div>');
        $('a[href=#tab18]').html('<div>'+show_day[showD8]+'</div><div>'+day8+'</div>');
        $('a[href=#tab19]').html('<div>'+show_day[showD9]+'</div><div>'+day9+'</div>');
        $('a[href=#tab110]').html('<div>'+show_day[showD10]+'</div><div>'+day10+'</div>');

        $('#chooseTime').attr('data-id','times'+$(e).parent().attr('data-id')).slideDown();
    }
    //选择时间段
    function choosetime(self){
        $('#chooseTime p').removeClass('active');
        $(self).addClass('active');
    }
    //提交--时间
    $('.timeTJ').click(function(){
        var day=$('#chooseTime a.weui-navbar__item');
        var css=$('#chooseTime').attr('data-id');
        for(var j=0;j<day.length;j++) {
            if ($(day[j]).hasClass('weui-bar__item--on')) {
                $('#chooseTime').attr('data-day',$(day[j]).find('div:last-child').html());//存数据‘今天||明天||后天’
                var time = $($($(day[j]).attr('href')+' p'));
                if(time.length<1){
                    $.toast('请选择预约时间段','text');
                    return false;
                }
                for (var i = 0; i < time.length; i++) {
                    if ($(time[i]).hasClass('active')) {
                        $('#chooseTime').attr('data-time',$(time[i]).html());//存数据‘时间段’
                        $('#show-actions-times').attr('data-day',$(day[j]).find('div:last-child').html()).attr('data-timeid',$(time[i]).attr('data-id')).attr('data-startT',$(time[i]).attr('data-startT')).attr('data-endT',$(time[i]).attr('data-endT')).find('p').html('时间: '+$('#chooseTime').attr('data-day')+' '+$('#chooseTime').attr('data-time'));
                        $('#chooseTime').slideUp();
                        return false;
                    }
                }
            }
        }
        $.toast('请选择时间预约段','text');
    });
    //筛选日期
    function dateTime(day,dataTime,tab){
        var html='';
        $.get(
                order_jishi_time,
                {
                    g_id:$('#choose').attr('data-id'),
                    datetime:day,
                    jishi_id:getQueryString('id')
                },
                function(res) {
                    var data=JSON.parse(res);
                    var str='';
                    if(data){
                        for(var j=0;j<data.length;j++){
                            str+=data[j].stime+',';
                        }
                    }
                    for (var i = 0; i < dataTime.length; i++) {
                        var patt1 = new RegExp(dataTime[i].title);
                        var result = patt1.test(str);//正则匹配该时间段是否已被占用
                        var a=dataTime[i].title;
                        var aa=a.split(':')[0]+a.split(':')[1];
                        var bb1=(new Date()).getHours()<10?('0'+(new Date()).getHours()):((new Date()).getHours());
                        var bb2=(new Date()).getMinutes()<10?('0'+(new Date()).getMinutes()):(new Date()).getMinutes();
                        if (Number(aa) < Number(bb1+''+bb2) && tab == '#tab14') {
                            //如果是当天时间并现在时间段之前的时间段不显示
                        }else{//该时间段之后并被占用的时间段显示灰色并不可选
                            if(result){
                                html += ('<p style="background:#999;color:#fff;border:inherit;">' + dataTime[i].title + '-' + dataTime[i].value + '</p>');
                            }else{//该时间段没被占用
                                html += ('<p data-startT=' + dataTime[i].title + ' data-endT=' + dataTime[i].value + ' data-id=' + dataTime[i].id + ' onclick="choosetime(this)">' + dataTime[i].title + '-' + dataTime[i].value + '</p>');
                            }
                        }
                    }
                    if(html==''){
                        $(tab).html('<div style="text-align: center">当天预约已满</div>');
                    }else {
                        $(tab).html(html);
                    }
                }
        );
    }

    //加入购物车按钮
    function addCart(e,order) {
        if($('.MDorSM p').html()=='请填写地址信息'){
            $.toast('请先填写地址信息','text');
            setTimeout(function(){
                $('.MDorSM>a').click();
            },1500);
            return false;
        }
        if($('.MDorSM p').html()=='请选择门店地址'){
            $.toast('请先选择门店地址','text');
            setTimeout(function(){
                $('.MDorSM>a').click();
            },1500);
            return false;
        }
        if($('#show-actions-times p').html()=='请选择服务时间'){
            $.toast('请先选择服务时间','text');
            setTimeout(function(){
                $('#show-actions-times').click();
            },1500);
            return false;
        }

        var str = sessionStorage.getItem('sessCart')||'';
        var re=$('#choose').attr('data-id')+($('.MDorSM>a').attr('data-storesid')||'0')+($('.MDorSM>a').attr('data-id')||'0')+(new Date()).getFullYear()+'-'+($('#show-actions-times').attr('data-day')||'')+' '+($('#show-actions-times').attr('data-startt')||'')+$('#show-actions-fuwuJS').attr('data-jishiid');
        var patt1 = new RegExp(re);
        var result = patt1.test(str);

        if(result){
            $.toast('购物车已存在该项目','text');
            return false;
        }
        $.get(
            addCar,
            {
                id: $('#choose').attr('data-id'),
                num:1,
                storeid:$('.MDorSM>a').attr('data-storesid')||'',
                addressid:$('.MDorSM>a').attr('data-id')||'',
                timeS:(new Date()).getFullYear()+'-'+$('#show-actions-times').attr('data-day')+' '+$('#show-actions-times').attr('data-startt'),
                timeE:(new Date()).getFullYear()+'-'+$('#show-actions-times').attr('data-day')+' '+$('#show-actions-times').attr('data-endt'),
                jishiid:getQueryString('id')
            },
            function (res) {
                if (res == 1) {
                    if(order=='order'){
                        updateCart();
                        setTimeout(function(){location.href=urlorder;},500)
                    }
                    $('#choose').fadeOut();
                    updateCart();  
                }else{
                    $.toast('加入购物车失败','text');
                }
            });
    }


    /*点击预约按钮*/
    function yuebiaoClick(a){
        if(Number($('.cartSum_num>p:last-child>span').html())>=360){
            $.toast('您预约时间已超过6小时','cancel');
            return false;
        }

        $('#show-actions-times p').html('请选择服务时间');

        var dataType=$(a).attr('data-type');
        var MDorSMhtml='';
        if(dataType=='1'){
            $.get(addressmoren, function (res) {
                var data = JSON.parse(res);
                if (data.id) {
                    MDorSMhtml='<a onclick="ajaxAdd(this)" data-id='+data.id+' class="weui-cell weui-cell_access" href="javascript:;">' +
                    '<div class="weui-cell__bd weui-cell_primary"><p>' + data.cname + '  ' + data.tel + '</p>' +
                    '<p>' + data.province + data.city + data.county + '</p><p>' + data.detailed_address + '</p></div><span class="weui-cell__ft"></span></a>';
                }else{
                    MDorSMhtml='<a onclick="ajaxAdd(this)" class="weui-cell weui-cell_access" href="javascript:;">' +
                    '<div class="weui-cell__bd weui-cell_primary"><p>请填写地址信息</p></div><span class="weui-cell__ft"></span></a>';
                }
                $('.MDorSM').html(MDorSMhtml);
                $('#choose').fadeIn("slow");
            });
        }else if(dataType=='2'){
            MDorSMhtml='<a onclick="storesCH(this)" class="weui-cell weui-cell_access" href="javascript:;">' +
            '<div class="weui-cell__bd weui-cell_primary"><p>请选择门店地址</p></div><span class="weui-cell__ft"></span></a>';
            $('.MDorSM').html(MDorSMhtml);
            $('#choose').fadeIn("slow");
        }else{
            $.toast('类型设置有误','text');
        }
        $('#choose').attr('data-id',$(a).attr('data-id')).attr('data-type',$(a).attr('data-type'));
    }
</script>